<template>

	<div>
		
		<el-form  :model="form" label-width="80px">
		  <el-form-item label="菜单ID">
		    <el-input v-model="form.menuId" readonly></el-input>
		  </el-form-item>
		  
		  <el-form-item label="菜单名称">
		    <el-input v-model="form.menuName"></el-input>
		  </el-form-item>
		  
		<el-form-item label="url">
		  <el-input v-model="form.url"></el-input>
		</el-form-item>
		<el-form-item label="上级菜单">
			
			
			  <el-select v-model="form.parentId" placeholder="请选择">
			    <el-option
			      v-for="item in menus"
			      :key="item.menuId"
			      :label="item.menuName"
			      :value="item.menuId">
			    </el-option>
			  </el-select>
			  
			  
			  
		 
		</el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="save()">保存</el-button>
		   
		  </el-form-item>
		</el-form>
		
		
		
	</div>
	
</template>

<script>
	export default{
		name:'MenuEdit',
		props:["id"],
		data(){
			return {
				form:{
					menuId:'',
					menuName:'',
					url:'',
					parentId:null,
				},
				menus:[
					
					
				]
			}
		},
		created() {
			//查询所有的菜单列表
			this.getMenus();
			
			if(this.id){
				this.getForm();
			}
		},
		methods:{
			getMenus(){
				this.$http({
				  method:'get',
				  url:'/api/menu?_type=list&pageNo=1&size=999999'
				})  .then((response) =>{
					 this.menus = response.data.data;
				}).catch((e)=>{
					console.log("失败的情况",e)
				});
			},
			//修改的时候初始化使用
			getForm(){
				// 获取远端图片
				this.$http({
				  method:'get',
				 
				  url:'/api/menu?_type=queryById&menuId='+this.id
				})  .then((response) =>{
				     this.form = response.data;
				}).catch((e)=>{
					console.log("失败的情况",e)
				});
			},
			save(){
			
				//构造了 application/x-www-form-urlencoded
				const params = new URLSearchParams();
				
				for(let key in this.form){
					params.append(key,this.form[key]);
				}
			
				
				 let url = '/api/menu?_type=save';
				if(this.id){ //修改
					url =  '/api/menu?_type=update';
				}
				
				// form /
				this.$http({
				  method:'post',
				  url:url,
				  params: params,
				})  .then((response) =>{
				     let {success} = response.data;
					
					 if(success){
						 this.$message.success("保存成功");
						 
						 //关掉自己
						 this.$emit("update:visible",false);
						 this.$emit("close");
					 }
				}).catch((e)=>{
					console.log("失败的情况",e)
				});
				
			}
		}
	}
	
	
</script>

<style scoped>
	
	
	
	
</style>